<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<style type="text/css">
		.ckb {
			width: 1.1rem;
			height: 1.1rem;
			border-radius: 50%;
			border: 1px solid #B8B4B4;
			display: inline-block;
			cursor: pointer;
			vertical-align: text-bottom;
			
		}

		.ckb_s {
			width: 1.1rem;
			height: 1.1rem;
			border-radius: 50%;
			display: inline-block;
			cursor: pointer;
			background: url(img/gouico.png) no-repeat 0 0;
			background-size: 1.1rem;
			border: 0;
			vertical-align: text-bottom;
		}
		.bgc{
			background-color: bisque;
		}
	</style>
	<body>
		<div id="app"></div>
		<template id="root">
			<div id="shopcart" class="shop-cart">
				<div class="tabs">
					<div class="border">
						<!-- data-*表示自定义属性。 -->
						<div class="title active" data-index="0">
							全部商品
							<span class="count">3</span>
						</div>
						<div class="title" data-index="1">
							降价商品
							<span class="count">0</span>
						</div>
						<div class="title last" data-index="2">
							库存紧张
							<span class="count">0</span>
						</div>
						<div class="line"></div>
					</div>
				</div>

				<div class="lists">
					<div class="header">
						<ul class="clearfix">
							<li>
								<span :class="totalAll?'ckb_s':'ckb'" @click="modifyCheckAll"></span>
								<label>全选</label>
							</li>
							<li class="product-info">商品信息</li>
							<li>单价</li>
							<li>数量</li>
							<li>金额</li>
							<li>操作</li>
						</ul>
					</div>

					<div id="shoplist" class="shoplist">
						<!-- 店铺内容及样式参考 -->
						<div class="shop" v-for="s in shopcarts">
							<div class="shop-info">
								<span :class="s.isChecked?'ckb_s':'ckb'" @click="modifyShop(s)"></span>
								
								<span class="shop-tip">店铺：</span>
								<a class="shop-name" href="#">{{s.shopName}}</a>
								<a href="#" class="wangwang">旺旺</a>
							</div>
							<div class="products">
								<div v-for="(p,index) in s.products"   :class="[(index+1)%2?'':'bgc']"  class="item">
									<div class="select-logo">
										<span :class="p.isChecked?'ckb_s':'ckb'" @click="modifyProduct(s,p)"></span>
										
										<img :src="p.topImg" alt="产品logo">
									</div>
									<div class="product-detail">
										<div class="left">
											<a href="#" class="product-name">
												{{p.productName}}
											</a>
											<div class="logos">
												<a href="#" class="card">信用卡</a>
												<a href="#" class="service">保障服务</a>
												<a href="#" class="order">订单险</a>
												<a href="#" class="seven">7天无理由</a>
											</div>
										</div>
										<div class="right" v-html="p.spec">
										</div>
									</div>
									<div class="price">
										<p class="market-price">￥{{p.marketPrice}}</p>
										<p class="real-price">￥{{p.price}}</p>
									</div>
									<div class="count">
										<span class="sub" @click="decrement(p)">-</span>
										<span class="input"><input type="text" v-model="p.count"></span>
										<span class="add" @click="increment(p)">+</span>
									</div>
									<div class="amount">￥{{p.count*p.price}}</div>
									<div class="delete">
										<a href="#" @click="removeProduct(s,p)">删除</a>
									</div>
								</div>
							</div>
						</div>

					</div>
				</div>

				<div class="operate">
					<div class="left">
						
						<span :class="dleAll?'ckb_s':'ckb'" @click="delCheckAll"></span>
						
						<a href="#" @click="delet">删除</a>
					</div>

					<div class="right">
						<div>已选择商品<span class="selected-count">{{totalNumber}}</span>件</div>
						<div class="amount">合计（不含运费）： <span class="sum">￥{{totalPrice}}</span></div>
						<a href="javascript:void(0);" class="settle">结算</a>
					</div>
				</div>
			</div>
		</template>
		<script>

		</script>
		<script>
			const app = Vue.createApp({
				template: "#root",
				data() {
					return {
						shopcarts,
						checkAll: false,
						dleAll:false
					}
				},
				mounted() {
					var titles = document.querySelectorAll('.title')
					var line = document.querySelector('.line')
					for (let i = 0; i < titles.length; i++) {
						titles[i].addEventListener('mouseenter', function() {
							for (var j = 0; j < titles.length; j++) {
								titles[j].classList.remove('active')
							}
							this.classList.add('active')
							line.style.left = i * line.offsetWidth + 'px'
						})
					}
				},
				computed: {
					totalPrice() {
						let sum = 0
						this.shopcarts.forEach((s) => {
							s.products.forEach((p) => {
								if (p.isChecked) {
									sum += p.count * p.price
								}
							})
						})
						return sum
					},
					totalNumber() {
						let sum = 0
						this.shopcarts.forEach((s) => {
							s.products.forEach((p) => {
								if (p.isChecked) {
									sum += p.count
								}
							})
						})
						return sum
					},
					totalAll(){
					if(this.shopcarts.length==0) return false
					 return this.shopcarts.length==this.shopcarts.filter((p)=>{
							return p.isChecked == true
						}).length
					}
				},
				methods: {
					shopchoose(s){
						
						this.shopid=s.shopId
					},
					change(p){
						p.isChecked=!p.isChecked
					},
					//全选
					getAll(){
						this.alls=!this.alls
					},
					getShop(){
						this.shop=!this.shop
					},
					increment(p) {
						p.count++
					},
					decrement(p) {
						if (p.count > 0) {
							p.count--
						}
					},
					removeProduct(s, p) {
						s.products.splice(s.products.indexOf(p), 1)
						if (s.products.length == 0) {
							this.shopcarts.splice(this.shopcarts.indexOf(s), 1)
						}
					},
					modifyShop(s) {
						s.isChecked=!s.isChecked
						// console.log(s.isChecked);
						s.products.forEach(p => {
							p.isChecked = s.isChecked
						});
					},
					modifyCheckAll() {
						this.checkAll=!this.checkAll
						this.shopcarts.forEach((s) => {
							s.isChecked = this.checkAll
							s.products.forEach((p) => {
								p.isChecked = this.checkAll
							})
						})
					},
					delCheckAll(){
						
						this.dleAll=!this.dleAll
						this.checkAll=this.dleAll
						
						this.shopcarts.forEach((s) => {
							s.isChecked = this.checkAll
							s.products.forEach((p) => {
								p.isChecked = this.checkAll
							})
						})
					},
					modifyProduct(s,p) {
						p.isChecked=!p.isChecked
						s.isChecked = s.products.length == s.products.filter((p) => {
							return p.isChecked == true
						}).length
					},
					delet(){
						if(this.checkAll===true) this.shopcarts.splice(0,this.shopcarts.length)
						this.dleAll=false
					}
				},
			})
			app.mount("#app")
		</script>
	</body>

</html>
